<template>
    <div>
        <MyTable :arr="goodsList">
            <!-- 表头 -->
            <template v-slot:title>
               <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th> 
            </template>
            <!-- 内容 -->
            <template v-slot:body="scope">
                <td>{{ scope.index+1 }}</td>
                <td>{{scope.row.goods_name}}</td>
                <td>{{ scope.row.goods_price }}</td>
                <!-- <td>{{ scope.row.tags }}</td> -->
                <td>
                    <div>
                        <!-- 
                            输入框失去焦点事件：blur
                         -->
                        <input ref="ipt" v-if="scope.row.inputVisible" 
                        @blur="scope.row.inputVisible=false" type="text"
                        v-model.trim="scope.row.inputValue"
                        @keydown.enter="addFn(scope.row)"
                        @keydown.esc="scope.row.inputValue=''">
                        <button v-else @click="showInputFn(scope.row)" >+tag</button>
                    </div>
                    <span class="badge bg-warning text-dark tags" 
                    v-for="(item,idx) in scope.row.tags" :key="idx">
                        {{item}}
                    </span>
                </td>
                <td>
                    <button @click="delFn(scope.index)" class="btn btn-danger btn-sm">删除</button>
                </td>
            </template>
        </MyTable>
    </div>
</template>

<script>
import MyTable from "../components/MyTable.vue"
import { getGoodsList } from "../api/goods"
/**
 * 需求：渲染商品列表数据
 * 1、封装表格组件
 * 2、请求商品列表数据
 *  2-1、封装axios，src/utils/request.js封装请求的基础路径
 *  2-2、封装请求函数，src/api/goods.js 封装接口函数，注意：引入自己封装的axios来使用
 *  2-3、在MyGoodsList组件中引入封装的请求函数，并在created函数中请求并保存数据
 * 3、父传子，把请求回来的商品列表数据传递给子组件循环渲染
 * 4、在子组件中获取到商品列表结合v-for指令进行渲染即可
 * 5、给删除按钮添加bootstrap的样式：btn btn-danger btn-sm
 *  
 * */ 
export default {
    components: {MyTable},
    data(){
        return {
            goodsList: [],
           
        }
    },
    created(){
        // 获取商品列表数据
        getGoodsList().then(res=>{
            console.log(15,res);
            this.goodsList = res.data.data;
        })
    },
    methods: {
        // 删除数据
        delFn(index){
            this.goodsList.splice(index,1);
        },
        // 显示tags中的输入框
        showInputFn(row){
            row.inputVisible = true;
            // 输入框自动聚焦 $refs
            // DOM更新是异步的，所以不能直接获取到DOM，如何解决？使用$nextTick方法，在其回调函数中就可以获取到更新 后的DOM 
            // this.$refs.ipt.focus(); // 报错
            this.$nextTick(()=>{
                this.$refs.ipt.focus();
            })
        },
        // 新增tags功能
        addFn(val){
            if(!val.inputValue){
                alert("内容不能为空！")
                return
            }
            // 需求6，天加tags
            val.tags.push(val.inputValue)
            val.inputValue = "";
            val.inputVisible =false;
        }
    }
}
</script>

<style>
.tags{
    margin-right: 5px;
}
</style>